<template>
  <div style="overflow:hidden; width:80%; margin:auto;">
    <!-- <div v-if=""></div> -->
    <div v-if="$route.params.id == '所有景点'">
      <div v-for="i in arr">
        <div  style="float:left; width:30%;padding:10px;box-sizing :border-box; ">
      
        <div style="width:100%; background:#fff;">
          <div style="padding-bottom:10px;">
            <img :src="i.img" style="width:100%;" />
          </div>
          <div style="font-size:16px;line-height:22px;color:#ccc;">{{i.title}}</div>
          <div style="font-size:13px; color:#afafaf; padding:15px 0px;">{{i.p}}</div>
        
      </div>
    </div>
      </div>
    </div>
    <div v-for="i in arr" style="float:left; width:30%; ">
      <div v-if="$route.params.id == i.type" style="padding:10px;box-sizing :border-box;">
        <div style="width:100%; background:#fff;">
          <div style="padding-bottom:10px;">
            <img :src="i.img" style="width:100%;" />
          </div>
          <div style="font-size:16px;line-height:22px;color:#ccc;">{{i.title}}</div>
          <div style="font-size:13px; color:#afafaf; padding:15px 0px;">{{i.p}}</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      arr: [
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8xMi80ZTYwMTNhMGVlZGMxMzlmNDYzNjIzZmMyZmI5Nzk5My00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "卢浮宫",
          p: "客户评分：★★★★★",
          type: "第9区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC9mNGU1M2Q1MDc3NTllNDQ4OTZmMDRhNjYwN2ZjMzIzZS00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "蓬皮设中心",
          p: "客户评分：★★★★★",
          type: "第2区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC83NGE1MGZmMmQ4MWRmYjlmMmE3MDMyMjE1ZTBjMTdhNC00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "塞纳河",
          p: "客户评分：★★★★★",
          type: "第3区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC8wY2M1Y2JkZTg0YmVhMWMwNzRmNDY1MGY0ODBjYTE0NS00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "巴黎圣母院",
          p: "客户评分：★★★★★",
          type: "第5区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8xMi9kMjU3OTJhZTJiYzY0NDg2MzkxYzYwZmM3MTM4ZjNiMi00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "凯旋门",
          p: "客户评分：★★★★★",
          type: "第8区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC84NmViYjQ5YjE1NWU2ZGY0MGFlODAxZmM3ODc0MWY1MC00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "圣心大教堂",
          p: "客户评分：★★★★★",
          type: "第9区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi84MGQ2N2I5Y2Q0MDgxMTZhMTdjOGJhNmE4MWYwMWUxOS00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "凡尔赛宫",
          p: "客户评分：★★★★★",
          type: "第2区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMS83ZjA1YmJmZGQ5ZWU1NzQ5ZDViMjdhYzNmYjNhNzkwMi0zNTF4MjAyLTkwLndlYnA_p_p100_p_3D.webp",
          title: "埃菲尔铁塔哦",
          p: "客户评分：★★★★★",
          type: "第2区"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi85YWI1YmIxOWRmNDVmNThmNGE1OWEwYjdiODU5OTE4OS00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "奥赛博物馆",
          p: "客户评分：★★★★★",
          type: "第3区"
        }
      ]
    };
  }
};
</script>


<style lang="stylus"></style>